<template>
  <div class="card-edit">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>优惠券管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 内容 区域 -->
    <div class="title">新增/编辑优惠券</div>
    <el-form status-icon label-width="100px" class="mt" :data="formdata">
      <el-form-item label="优惠券名称">
        <el-input class="width" v-model="formdata.title"></el-input>
      </el-form-item>
      <el-form-item label="优惠券金额">
        <el-input class="width" v-model="formdata.money"></el-input>
      </el-form-item>
      <el-form-item label="使用金额限制">
        <el-input class="width" v-model="formdata.isno"></el-input>
        <span>元</span
        ><span class="mini-text">（不填写即为无使用金额限制）</span>
      </el-form-item>
      <el-form-item label="使用时限">
        <el-input class="width" v-model="formdata.days"></el-input>
        <span>天</span><span class="mini-text">（不填写即为无使用时限）</span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSub">提交</el-button>
        <el-button @click="back">返回优惠券列表</el-button>
      </el-form-item>
    </el-form>
    <!-- <div class="title">新增/编辑优惠券</div>
    <div class="mt">
      <span class="mr">优惠券名称:</span>
      <el-input v-model="row.title" class="card-input"></el-input>
    </div>
    <div class="item">
      <span class="mr">优惠券金额:</span>
      <el-input v-model="row.money" class="card-input"></el-input>
      <span>元</span>
    </div>
    <div class="item">
      <span class="mr">使用金额限制:</span>
      <el-input
        v-model="moneyRight"
        class="card-input"
        @input="onChange"
        name="moneyRight"
      ></el-input>
      <span>元</span><span class="mini-text">（不填写即为无使用金额限制）</span>
    </div>
    <div class="item">
      <span class="mr">使用时限:</span>
      <el-input v-model="row.days" class="card-input"></el-input>
      <span>天</span><span class="mini-text">（不填写即为无使用时限）</span> -->

    <!-- 底部区域 -->
    <!-- <div class="footer mt"> -->
    <!-- <el-button class="sub-btn" type="primary" @click="onSub">提交</el-button> -->
    <!-- <el-button class="bcak-btn" @click="$emit('goback')" -->
    <!-- >返回优惠券列表</el-button -->
    <!-- > -->
  </div>
</template>
<script>
export default {
  name: 'CardEdit',
  data() {
    return {
      moneyRight: '',
      formdata: {}
    }
  },
  props: {
    row: {
      type: [Object, String, Number],
      required: true
    }
  },
  components: {},
  computed: {},
  mounted() {
    this.formdata = { ...this.row }
    // console.log({ ...this.row })
  },
  methods: {
    onSub() {
      // console.log(this.row)
      if (this.row) {
        this.$emit('edit-success', this.formdata)
      } else {
        this.$emit('add-succsee', this.formdata)
      }
      // console.log(this.formdata)
    },
    back() {
      // this.formdata.resetFields()
      // console.log(123)
      this.$emit('goback')
    }
  },
  created() {},
  watch: {}
}
</script>
<style lang="less" scoped>
.card-edit {
  .card-input {
    width: 200px;
  }
  .item {
    margin-top: 20px;
  }
  .title {
    margin-top: 20px;
  }
  .mr {
    margin-right: 20px;
  }
  .mt {
    margin-top: 20px;
  }
  /deep/.mini-text {
    font-size: 12px;
  }
  /deep/.width {
    width: 30%;
  }
}
</style>
